import { loginApi } from '@/api/user'
import { delToken, getToken, setToken } from '@/utils/storage'
import router from '@/router'
import { Message } from 'element-ui'

export default {
  // 开启命名空间
  namespaced: true,
  state () {
    return {
      token: getToken() || ''
    }
  },
  mutations: {
    /**
    *
      既然已经把token存储到vuex, 为什么还要存储到本地?
      1) vuex中存储的数据是响应式, 而且vuex中有很对辅助函数可以让我们在多个组件中更好的获取和操作数据
      2) 但是, vuex中存储的数据是内存态, 刷新就丢失了, 所以把数据持久化一份到本地方便vuex中刷新时候获取
      3) 结论: vuex(操作数据)+本地持久化(存储数据)  */
    setToken (state, token) {
      // 存储token到本地
      setToken(token)
      // 存储token到vuex
      state.token = token
    },
    logout (state) {
      state.token = ''
      delToken()
    }
  },
  actions: {
    async  login (ctx, { username, password }) {
      try {
        const res = await loginApi({ username, password })
        ctx.commit('setToken', res.data.token)
        Message.success('登录成功')
        router.replace('/')
      } catch (error) {

      }
    }
  }
}
